<script setup>
import { getPurchaseBoardRkhgl } from '@/api/visual/purchaseBoard'

const optionData = ref([])
const month = computed(() => {
  return optionData.value[0]
  // const rk = optionData.value.find(item => item.db === 'rk')?.benyue
  // const th = optionData.value.find(item => item.db === 'th')?.benyue
  // if (rk === 0 && th === 0) return 0
  // if (!th && rk > 0) return 100

  // if (!rk) return 0

  // return (isNaN((rk - th) / rk) ? 0 : (rk - th) / rk) * 100
})

const lastMonth = computed(() => {
  return optionData.value[1]
  // const rk = optionData.value.find(item => item.db === 'rk')?.shangyue
  // const th = optionData.value.find(item => item.db === 'th')?.shangyue
  // if (rk === 0 && th === 0) return 0
  // if (!th && rk > 0) return 100

  // if (!rk) return 0

  // return (isNaN((rk - th) / rk) ? 0 : (rk - th) / rk) * 100
})

const last2Month = computed(() => {
  return optionData.value[2]
  // const rk = optionData.value.find(item => item.db === 'rk')?.qianlianyue
  // const th = optionData.value.find(item => item.db === 'th')?.qianlianyue
  // if (rk === 0 && th === 0) return 0
  // if (!th && rk > 0) return 100

  // if (!rk) return 0

  // return (isNaN((rk - th) / rk) ? 0 : (rk - th) / rk) * 100
})

const loadData = async () => {
  const { data } = await getPurchaseBoardRkhgl()
  optionData.value = data
}
onMounted(loadData)
</script>

<template>
  <div class="ps_w_h_100">
    <dv-border-box10>
      <div class="purchaseBoard3-content">
        <div class="title board-title">
          <span>入库合格率</span>
        </div>

        <div class="circle-list">
          <div class="circle-list-item">
            <div class="item-title">上上月</div>
            <div class="item-chart">
              <ps-chart-circle2 :value="last2Month" class="chart" color="#e4a846" />
            </div>
          </div>

          <div class="circle-list-item">
            <div class="item-title">上月</div>
            <div class="item-chart">
              <ps-chart-circle2 :value="lastMonth" class="chart" color="#7980d2" />
            </div>
          </div>

          <div class="circle-list-item">
            <div class="item-title">本月</div>
            <div class="item-chart">
              <ps-chart-circle2 :value="month" class="chart" color="#62bb86" />
            </div>
          </div>
        </div>
      </div>
    </dv-border-box10>
  </div>
</template>

<style scoped lang="scss">
.purchaseBoard3-content {
  padding: 10px;
  height: 100%;

  .title {
    margin-bottom: 10px;
    height: 10%;
  }

  .circle-list {
    margin-top: 10%;
    height: calc(90% - 10px);
    display: flex;
    justify-content: space-evenly;
  }

  .circle-list-item {
    width: 30%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
  }

  .item-title {
    color: #fff;
  }

  .item-chart {
    width: 100%;
    height: 70%;
    color: #fff;
  }
}
</style>
